<!--
- File:    全部任务.
-->
<template>
  <div class="Web_Box">
    <div class="tasks_tab">
      <div class="Tabs2">
        <ul>
          <li :class="{'on-active': taskType == '0'}" @click="switchTaskType('0')" style="width: 33.33%">全部</li>
          <li :class="{'on-active': taskType == '1'}" @click="switchTaskType('1')" style="width: 33.33%">未完成</li>
          <li :class="{'on-active': taskType == '2'}" @click="switchTaskType('2')" style="width: 33.33%">已完成</li>
        </ul>
      </div>
    </div>
    <div class=" tasks_tab">
      <div class="Tabs2">
        <ul>
          <li :class="{'on': dateType == '0'}" @click="switchDateType('0')">今日</li>
          <li :class="{'on': dateType == '1'}" @click="switchDateType('1')">本周</li>
          <li :class="{'on': dateType == '2'}" @click="switchDateType('2')">本月</li>
          <li :class="{'on': dateType == '3'}" @click="switchDateType('3')">历史</li>
        </ul>
      </div>
    </div>
    <div class="taskbox_conts" v-show="plantList.data.length > 0">
      <a class="batch_btn" @click="gotoTaskClassify">批量完成任务</a>
      <div class="index_menu_box2 mt20">
        <div class="index_menu2">
          <ul class="f-cb" style="width:30rem;">
            <li v-for="plant in plantList.data" @click="switchPlant(plant)">
              <a :class="{'cur': plant.o_id == currentPlant.o_id}">{{plant.m_name}}</a></li>
          </ul>
        </div>
      </div>
      <div class="task_block">
        <div class="watering_list" v-for="(task, taskIndex) in currentPlant.task">
          <div class="watering">
            <i class="iconfont icon-shuidi1"></i><span>{{task.ta_type_name}}</span><span style="font-size: 12px; color: #aaa"> (编号:{{task.sg_id != '0' ? task.sg_id + '-' : ''}}{{task.g_id}}-{{task.o_id}}-{{task.mt_id}})</span>
            <a class="water_btn" @click="gotoAddGrowthNote(task)" v-show="task.state == '0'">去完成</a>
            <span class="hl" @click="cancleTask(task.mt_id, taskIndex)" v-show="task.state == '0'">忽略</span>
            <span class="hl" v-show="task.state == '1'">已完成</span>
          </div>
          <div class="water_cont">
            <ul>
              <li>提醒间隔   {{task.ta_interval}}{{task.ta_interval_type | taskIntervalTxt}}</li>
              <li>提醒时间   {{task.ta_time}}</li>
              <li v-html="task.ta_note"></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <empty-data :show="plantList.requested && plantList.data.length <= 0" text="当前没有任务~"></empty-data>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        taskType: '0', // 0 全部 1 未完成 2 已完成
        dateType: '0', // 0:今日 1本周 2:本月 3上月以前
        plantList: {requested: false, data: []},
        currentPlant: {task: []}
      }
    },
    created() {
      this.getTaskList(this.dateType)
    },
    methods: {
      switchDateType(type) {
        this.dateType = type
        this.plantList = {requested: false, data: []}
        this.getTaskList()
      },
      switchTaskType(type) {
        this.taskType = type
        this.plantList = {requested: false, data: []}
        this.getTaskList()
      },
      switchPlant(plant) {
        this.currentPlant = plant
      },
      gotoTaskClassify() {
        this.$router.push({name: 'task-classify'})
      },
      gotoAddGrowthNote(task) {
        this.$router.push({
          name: 'growth-add',
          query: {plant: task.o_id, action: task.ta_type, status: task.growth_status}
        })
      },
      getTaskList() {
        let param = {
          is_share: 0,
          state: this.taskType,
          type: this.dateType
        }
        this.$request.getTaskList(param).then(data => {
          if (data.length > 0) {
            this.plantList.data = data
            this.currentPlant = data[0]
          }
        }).finally(() => {
          this.plantList.requested = true
        })
      },
      cancleTask(id, index) {
        this.$request.cancleTask(id).then(data => {
          this.currentPlant.task.splice(index, 1)
          if (this.currentPlant.task.length <= 0) { // 该植物所有任务都已处理，移除该植物
            for (let i = 0; i < this.plantList.data.length; i++) {
              if (this.currentPlant.o_id == this.plantList.data[i].o_id) {
                this.plantList.data.splice(i, 1)
                this.currentPlant = this.plantList.data[0]
                break
              }
            }
          }
          this.$toast('忽略成功')
        })
      }
    }
  }
</script>

<style lang="less">
  .tasks_tab .Tabs2 .on-active {
    background-color: #3dbb6e;
    color: white;
  }
</style>